<script setup lang="ts">
import BlockBox from '../BlockBox.vue';
import { ESButton, ESIcon } from '../../packages/index';
</script>

<template>
    <BlockBox text="按钮测试">
        <div class="button-box">
            <!-- "default" | "primary" | "link" | "ghost"|"plain" -->
            <ESButton type="default">default</ESButton>
            <ESButton type="primary">primary</ESButton>
            <ESButton type="link">link</ESButton>
            <ESButton type="ghost">ghost</ESButton>
            <ESButton type="plain">plain</ESButton>
            <br>
            <!-- "success" | "info" | "warning" | "danger", -->
            <ESButton status="success">success </ESButton>
            <ESButton status="info">info </ESButton>
            <ESButton status="warning">warning </ESButton>
            <ESButton status="danger">danger</ESButton>
            <ESButton type="primary" status="success"> link danger</ESButton>
            <ESButton type="link" status="info"> link danger</ESButton>
            <ESButton type="ghost" status="warning"> link danger</ESButton>
            <ESButton type="plain" status="danger"> link danger</ESButton>
            <br>
            <!-- "xs" | "sm" | "md" | "lg", -->
            <ESButton size="xs">xs</ESButton>
            <ESButton size="sm">sm</ESButton>
            <ESButton size="md">md</ESButton>
            <ESButton size="lg">lg</ESButton>
            <br>
            <!-- "square" | "bend" | "round", -->
            <ESButton shape="square">square</ESButton>
            <ESButton shape="bend">bend</ESButton>
            <ESButton shape="round">round</ESButton>
            <br>
            <!-- disabled-->
            <ESButton disabled type="default">default</ESButton>
            <ESButton disabled type="primary">primary</ESButton>
            <ESButton disabled type="link">link</ESButton>
            <ESButton disabled type="ghost">ghost</ESButton>
            <ESButton disabled type="plain">plain</ESButton>

            <ESButton disabled status="success">success </ESButton>
            <ESButton disabled status="info">info </ESButton>
            <ESButton disabled status="warning">warning </ESButton>
            <ESButton disabled status="danger">danger</ESButton>
            <ESButton disabled type="primary" status="success"> link danger</ESButton>
            <ESButton disabled type="link" status="info"> link danger</ESButton>
            <ESButton disabled type="ghost" status="warning"> link danger</ESButton>
            <ESButton disabled type="plain" status="danger"> link danger</ESButton>
        </div>
    </BlockBox>
</template>

<style scoped>
.button-box>button {
    margin: 10px;
    margin-left: 0px;

}
</style>
